// 场景管理功能
let currentPage = 1;
let draggedItem = null;
let draggedItemType = null;

// 为所有步骤添加折叠功能
function bindStepCollapseFunctionality() {
    $('.collapse-step').off('click').on('click', function () {
        const stepItem = $(this).closest('.step-item');
        const stepBody = stepItem.find('.step-body');
        const icon = $(this).find('i');

        // 切换d-none类
        stepBody.toggleClass('d-none');

        // 根据当前状态更新图标
        if (stepBody.hasClass('d-none')) {
            icon.removeClass('bi-chevron-down').addClass('bi-chevron-right');
        } else {
            icon.removeClass('bi-chevron-right').addClass('bi-chevron-down');
        }
    });

    // 绑定删除步骤功能
    $('.delete-step').off('click');
    $('.delete-step').on('click', function () {
        const stepItem = $(this).closest('.step-item');

        // 获取子步骤容器
        const childrenContainer = stepItem.find('.step-children');

        // 如果有子步骤，先移除子步骤
        if (childrenContainer.length > 0) {
            childrenContainer.empty();
        }

        // 移除当前步骤
        stepItem.remove();

        // 更新步骤序号
        updateStepNumbers();
    });
}

// 页面加载完成后执行
$(document).ready(function () {
    // 初始加载场景列表
    loadSceneList();

    // 搜索按钮点击事件
    $('#search-btn').click(function () {
        loadSceneList(1);
    });

    // 回车键搜索
    $('#search-input').keypress(function (e) {
        if (e.which === 13) {
            loadSceneList(1);
        }
    });

    // 分页点击事件
    $(document).on('click', '#pagination .page-link', function (e) {
        e.preventDefault();
        const page = $(this).data('page');
        if (page) {
            loadSceneList(page);
        }
    });

    // 新增场景按钮点击事件
    $('#add-scene-btn').click(function () {
        // 重置表单
        $('#add-edit-form')[0].reset();

        // 清空表单数据
        $('#scene-name').val('');
        $('#scene-description').val('');
        $('#scene-tags').val('');

        // 设置表单模式
        $('#add-edit-form').data('mode', 'add');
        $('#add-edit-form').removeData('id');
        $('#addEditModalLabel').text('新增场景');

        // 清空步骤列表
        $('#scene-steps').empty();

        // 添加提示信息
        $('#scene-steps').html(`
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>  点击左侧API 旁边的 + 号添加到场景步骤中，或使用上方按钮添加脚本、条件或循环步骤
            </div>
            <div id="steps-container" class="steps-container">
                <!-- 场景步骤将通过JavaScript动态加载 -->
            </div>
        `);

        // 加载API列表
        loadSceneApiList();

        // 显示模态框
        $('#addEditModal').modal('show');

        // 为步骤添加折叠功能
        $('#addEditModal').on('shown.bs.modal', bindStepCollapseFunctionality);
    });

    // 编辑场景按钮点击事件
    $(document).on('click', '.edit-scene', function () {
        const sceneId = $(this).data('id');
        editScene(sceneId);
    });

    // 删除场景按钮点击事件
    $(document).on('click', '.delete-scene', function () {
        const sceneId = $(this).data('id');
        const sceneName = $(this).closest('tr').find('td:first').text();

        console.log('删除按钮点击，场景ID:', sceneId);

        // 设置删除确认模态框
        $('#delete-scene-id').val(sceneId);
        console.log('设置删除ID后的值:', $('#delete-scene-id').val());
        $('#delete-scene-name').text(sceneName);

        // 显示删除确认模态框
        $('#deleteModal').modal('show');
    });

    // 确认删除场景
    $('#confirm-delete-btn').click(function () {
        const sceneId = $('#delete-scene-id').val();
        console.log('确认删除，场景ID:', sceneId);

        if (!sceneId || sceneId === 'undefined') {
            console.error('场景ID无效:', sceneId);
            showToast('error', '场景ID无效，删除失败');
            return;
        }

        $.ajax({
            url: `/scene/${sceneId}`,
            method: 'DELETE',
            success: function (response) {
                if (response.success) {
                    showToast('success', response.message || '删除成功');
                    $('#deleteModal').modal('hide');
                    loadSceneList(currentPage);
                } else {
                    showToast('error', response.message || '删除失败');
                }
            },
            error: function (error) {
                console.error('删除场景失败:', error);
                showToast('error', '删除场景失败');
            }
        });
    });

    // 运行场景按钮点击事件
    $(document).on('click', '.run-scene', function () {
        const sceneId = $(this).data('id');
        runScene(sceneId);
    });

    // 保存场景 - 修复按钮选择器
    $(document).on('click', '#addEditModal .modal-footer .btn-primary', function () {
        saveScene();
    });

    // 阻止表单的默认提交行为
    $('#add-edit-form').submit(function (e) {
        e.preventDefault(); // 阻止表单的默认提交行为
    });

    // 添加脚本步骤按钮点击事件
    $('#add-script-btn').click(function () {
        $('#scriptModal').modal('show');
    });

    // 添加条件步骤按钮点击事件
    $('#add-condition-btn').click(function () {
        $('#conditionModal').modal('show');
    });

    // 添加循环步骤按钮点击事件
    $('#add-loop-btn').click(function () {
        $('#loopModal').modal('show');
    });

    // 保存脚本步骤
    $('#save-script-btn').click(function () {
        const scriptName = $('#script-name').val();
        const scriptCode = scriptEditor.getValue();

        if (!scriptName) {
            showToast('error', '请输入脚本名称');
            return;
        }

        if (!scriptCode) {
            showToast('error', '请输入脚本代码');
            return;
        }

        // 创建脚本步骤
        const scriptStep = createScriptStep(scriptName, scriptCode);

        // 添加到步骤列表
        $('#scene-steps').append(scriptStep);

        // 关闭模态框
        $('#scriptModal').modal('hide');

        // 重置表单
        $('#script-form')[0].reset();
        scriptEditor.setValue('');

        // 更新步骤序号
        updateStepNumbers();

        // 为新添加的步骤绑定折叠功能
        bindStepCollapseFunctionality();

        // 为新添加的步骤绑定折叠功能
        bindStepCollapseFunctionality();

        // 为新添加的步骤绑定折叠功能
        bindStepCollapseFunctionality();

        // 为新添加的步骤绑定折叠功能
        bindStepCollapseFunctionality();
    });

    // 保存条件步骤
    $('#save-condition-btn').click(function () {
        const conditionName = $('#condition-name').val();
        const conditionExpression = $('#condition-expression').val();

        if (!conditionName) {
            showToast('error', '请输入条件名称');
            return;
        }

        if (!conditionExpression) {
            showToast('error', '请输入条件表达式');
            return;
        }

        // 创建条件步骤
        const conditionStep = createConditionStep(conditionName, conditionExpression);

        // 添加到步骤列表
        $('#scene-steps').append(conditionStep);

        // 关闭模态框
        $('#conditionModal').modal('hide');

        // 重置表单
        $('#condition-form')[0].reset();

        // 更新步骤序号
        updateStepNumbers();

        // 为新添加的步骤绑定折叠功能
        bindStepCollapseFunctionality();
    });

    // 保存循环步骤
    $('#save-loop-btn').click(function () {
        const loopName = $('#loop-name').val();
        const loopType = $('#loop-type').val();
        const loopCount = $('#loop-count').val();
        const loopExpression = $('#loop-expression').val();
        const loopCollection = $('#loop-collection').val();

        if (!loopName) {
            showToast('error', '请输入循环名称');
            return;
        }

        if (loopType === 'count' && (!loopCount || loopCount <= 0)) {
            showToast('error', '请输入有效的循环次数');
            return;
        }

        if (loopType === 'while' && !loopExpression) {
            showToast('error', '请输入循环条件表达式');
            return;
        }

        if (loopType === 'foreach' && !loopCollection) {
            showToast('error', '请输入集合表达式');
            return;
        }

        // 创建循环步骤
        const loopStep = createLoopStep(loopName, loopType, loopCount, loopExpression, loopCollection);

        // 添加到步骤列表
        $('#scene-steps').append(loopStep);

        // 关闭模态框
        $('#loopModal').modal('hide');

        // 重置表单
        $('#loop-form')[0].reset();

        // 更新步骤序号
        updateStepNumbers();

        // 为新添加的步骤绑定折叠功能
        bindStepCollapseFunctionality();
    });
});

// 加载场景列表
function loadSceneList(page = 1) {
    const search = $('#search-input').val();

    $.ajax({
        url: '/scene/data',
        method: 'GET',
        data: { page: page, search: search },
        success: function (response) {
            if (response.success) {
                renderSceneList(response.data.scenes);
                renderPagination(response.data.pagination);
                currentPage = page;
            } else {
                showToast('error', response.message || '加载场景列表失败');
            }
        },
        error: function (error) {
            console.error('加载场景列表失败:', error);
            showToast('error', '加载场景列表失败');
        }
    });
}

// 渲染场景列表
function renderSceneList(scenes) {
    const tbody = $('#scene-list');
    tbody.empty();

    if (!scenes || scenes.length === 0) {
        tbody.append('<tr><td colspan="6" class="text-center">暂无数据</td></tr>');
        return;
    }

    scenes.forEach(function (scene) {
        const tagsHtml = scene.tags ? scene.tags.map(tag => `<span class="badge bg-secondary me-1">${tag}</span>`).join('') : '';

        const row = $(`
            <tr>
                <td>${scene.name}</td>
                <td>${scene.description || '-'}</td>
                <td>${scene.step_count || 0}</td>
                <td>${tagsHtml}</td>
                <td>${new Date(scene.updated_at).toLocaleString()}</td>
                <td>
                    <button class="btn btn-sm btn-primary edit-scene" data-id="${scene.id}" title="编辑">
                        <i class="bi bi-pencil"></i> 编辑
                    </button>
                    <button class="btn btn-sm btn-success run-scene ms-1" data-id="${scene.id}" title="运行">
                        <i class="bi bi-play"></i> 运行
                    </button>
                    <button class="btn btn-sm btn-danger delete-scene ms-1" data-id="${scene.id}" title="删除">
                        <i class="bi bi-trash"></i> 删除
                    </button>
                </td>
            </tr>
        `);

        tbody.append(row);
    });
}

// 渲染分页
function renderPagination(pagination) {
    const paginationContainer = $('#pagination ul');
    const paginationInfo = $('#pagination-info');

    paginationContainer.empty();

    // 当没有分页信息或总条数为0时，显示0条数据
    if (!pagination || !pagination.total_items || pagination.total_items === 0) {
        paginationInfo.text('显示 0 条，共 0 条');
        return;
    }

    // 当只有一页数据时，只显示分页信息，不显示分页按钮
    if (pagination.total_pages <= 1) {
        paginationInfo.text(`显示 ${pagination.start}-${pagination.end} 条，共 ${pagination.total_items} 条`);
        return;
    }

    // 更新分页信息
    paginationInfo.text(`显示 ${pagination.start}-${pagination.end} 条，共 ${pagination.total_items} 条`);

    // 上一页
    const prevClass = pagination.current_page === 1 ? 'disabled' : '';
    paginationContainer.append(`<li class="page-item ${prevClass}"><a class="page-link" href="#" data-page="${pagination.current_page - 1}">上一页</a></li>`);

    // 页码
    for (let i = 1; i <= pagination.total_pages; i++) {
        const activeClass = i === pagination.current_page ? 'active' : '';
        paginationContainer.append(`<li class="page-item ${activeClass}"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`);
    }

    // 下一页
    const nextClass = pagination.current_page === pagination.total_pages ? 'disabled' : '';
    paginationContainer.append(`<li class="page-item ${nextClass}"><a class="page-link" href="#" data-page="${pagination.current_page + 1}">下一页</a></li>`);
}

// 编辑场景
function editScene(sceneId) {
    $.ajax({
        url: `/scene/${sceneId}`,
        method: 'GET',
        success: function (response) {
            if (response.success) {
                const scene = response.scene;  // 修正：后端返回的是scene而不是data

                // 重置表单
                $('#add-edit-form')[0].reset();

                // 设置表单模式为编辑
                $('#add-edit-form').data('mode', 'edit');
                $('#add-edit-form').data('id', sceneId);
                $('#addEditModalLabel').text('编辑场景');

                // 填充表单数据
                $('#scene-name').val(scene.name);
                $('#scene-description').val(scene.description || '');
                $('#scene-tags').val(scene.tags ? scene.tags.join(', ') : '');

                // 清空并填充步骤列表
                $('#scene-steps').empty();
                console.log('清空scene-steps容器');

                // 无论是否有步骤，都先创建步骤容器结构
                $('#scene-steps').append(`
                    <div class="alert alert-info" style="${scene.steps && scene.steps.length > 0 ? 'display: none;' : ''}">
                        <i class="bi bi-info-circle"></i> 点击左侧API 旁边的 + 号添加到场景步骤中，或使用上方按钮添加脚本、条件或循环步骤
                    </div>
                    <div id="steps-container" class="steps-container">
                        <!-- 场景步骤将通过JavaScript动态加载 -->
                    </div>
                `);

                console.log('创建steps-container成功', $('#addEditModal').find('#steps-container').length);
                console.log('steps-container的HTML结构:', $('#addEditModal').find('#steps-container')[0]);

                // 加载API列表并等待完成后再渲染场景步骤
                loadSceneApiList().then(() => {
                    // 渲染场景步骤
                    if (scene.steps && scene.steps.length > 0) {
                        scene.steps.forEach(function (step) {
                            console.log('渲染场景步骤:', step);
                            let stepHtml = '';
                            switch (step.type) {
                                case 'api':
                                    stepHtml = createApiStep(step.name, step.api_id, step.api_name, step.method, step.url);
                                    break;
                                case 'script':
                                    stepHtml = createScriptStep(step.name, step.script);
                                    break;
                                case 'condition':
                                    stepHtml = createConditionStep(step.name, step.expression);
                                    break;
                                case 'loop':
                                    stepHtml = createLoopStep(step.name, step.loop_type, step.count, step.expression, step.collection);
                                    break;
                            }
                            $('#steps-container').append(stepHtml);
                        });
                    }
                });

                // 显示模态框
                $('#addEditModal').modal('show');

                // 为步骤添加折叠功能
                $('#addEditModal').on('shown.bs.modal', bindStepCollapseFunctionality);
            } else {
                showToast('error', response.message || '加载场景失败');
            }
        },
        error: function (error) {
            console.error('加载场景失败:', error);
            showToast('error', '加载场景失败');
        }
    });
}

// 运行场景
function runScene(sceneId) {
    showToast('info', '开始运行场景...');

    $.ajax({
        url: `/scene/${sceneId}/run`,
        method: 'POST',
        success: function (response) {
            if (response.success) {
                showToast('success', response.message || '场景运行成功');
                // 可以跳转到执行记录页面
                if (response.data && response.data.execution_id) {
                    setTimeout(function () {
                        window.open(`/execution/${response.data.execution_id}`, '_blank');
                    }, 1000);
                }
            } else {
                showToast('error', response.message || '场景运行失败');
            }
        },
        error: function (error) {
            console.error('运行场景失败:', error);
            showToast('error', '运行场景失败');
        }
    });
}

// 加载API列表
function loadApiList() {
    $.ajax({
        url: '/api/data',
        method: 'GET',
        data: {
            per_page: 1000 // 加载所有API
        },
        success: function (response) {
            console.log("加载API列表成功:", response.apis)
            renderSceneApiList(response.apis);
        },
        error: function (error) {
            console.error('加载API列表失败:', error);
            showToast('error', '加载API列表失败');
        }
    });
}

// 保存场景 - 标准实现
function saveScene() {
    // 验证表单
    const name = $('#scene-name').val().trim();
    if (!name) {
        showToast('error', '请输入场景名称');
        return;
    }

    // 收集数据
    const description = $('#scene-description').val().trim();
    const tags = $('#scene-tags').val().trim();

    // 收集步骤数据
    let steps = [];
    try {
        if (typeof collectStepsData === 'function') {
            steps = collectStepsData();
            console.log('通过collectStepsData函数收集到的步骤数:', steps.length);
        } else {
            // 备用方案：直接收集步骤数据
            console.log('collectStepsData函数未找到，使用备用方案收集步骤数据');
            steps = [];
            $('#scene-steps .step-item').not('.step-children .step-item').each(function() {
                const type = $(this).data('type');
                const name = $(this).find('.step-name').first().val() || $(this).find('.step-name').first().text();
                
                const step = {
                    type: type,
                    name: name
                };
                
                // 根据步骤类型收集特定数据
                if (type === 'api') {
                    step.api_id = $(this).data('api-id');
                    step.method = $(this).find('.step-method').first().val() || $(this).find('.step-method').first().text();
                    step.url = $(this).find('.step-url').first().val() || $(this).find('.step-url').first().text();
                } else if (type === 'script') {
                    step.script = $(this).find('.step-script').first().val();
                } else if (type === 'condition') {
                    step.expression = $(this).find('.step-condition').first().val();
                } else if (type === 'loop') {
                    step.loop_type = $(this).find('.step-loop-type').first().val();
                    if (step.loop_type === 'count') {
                        step.count = $(this).find('.step-loop-count').first().val();
                    } else if (step.loop_type === 'while') {
                        step.expression = $(this).find('.step-loop-expression').first().val();
                    } else if (step.loop_type === 'foreach') {
                        step.collection = $(this).find('.step-loop-collection').first().val();
                    }
                }
                
                steps.push(step);
            });
            console.log('通过备用方案收集到的步骤数:', steps.length);
        }
    } catch (e) {
        console.error('收集步骤数据失败:', e);
        steps = [];
    }

    const requestData = {
        name: name,
        description: description,
        tags: tags ? tags.split(',').map(tag => tag.trim()) : [],
        steps: steps
    };

    // 判断是新增还是编辑
    const mode = $('#add-edit-form').data('mode') || 'add';
    const sceneId = $('#add-edit-form').data('id');

    let url = '/scene';
    let method = 'POST';

    if (mode === 'edit' && sceneId) {
        url = `/scene/${sceneId}`;
        method = 'PUT';
    }

    console.log('即将保存的场景数据:', requestData);
    
    try {
        const jsonData = JSON.stringify(requestData);
        console.log('JSON序列化后的数据大小:', jsonData.length, '字符');
        
        // 发送请求
        $.ajax({
            url: url,
            method: method,
            contentType: 'application/json',
            data: jsonData,
            success: function (response) {
            if (response.success) {
                showToast('success', response.message || '保存成功');
                $('#addEditModal').modal('hide');

                // 重新加载场景列表
                if (typeof loadSceneList === 'function') {
                    loadSceneList(currentPage || 1);
                }
            } else {
                showToast('error', response.message || '保存失败');
            }
        },
        error: function (xhr, status, error) {
            console.error('保存场景失败:', error);
            console.error('错误详情:', {
                status: xhr.status,
                statusText: xhr.statusText,
                responseText: xhr.responseText
            });
            showToast('error', '保存场景失败');
        }
    });
    } catch (jsonError) {
        console.error('JSON序列化失败:', jsonError);
        console.log('尝试序列化的原始数据:', requestData);
        showToast('error', '数据序列化失败，请检查数据格式');
    }
}